<template>
	<view class="study">
		<u-navbar class="navbar" title-width="400" title="" :is-back="false">
			<view class="slot-wrap" v-if="isStudy == 1">
				<text v-for="(v, k) in list" :class="nameIndex == k ? 'nameColor' : ''" :key="k" @tap="changeTitle(k)">{{v.name}}</text>
			</view>
			<view v-else class="slot-wrap">学习</view>
		</u-navbar>
		<view class="tabs" v-if="isStudy == 1">
			<u-tabs :list="list2" height="60" font-size="32" inactive-color="#999999" active-color="#333333"  bar-width="32" bar-height="6" :is-scroll="true"
			 :current="current" @change="change"></u-tabs>
		</view>
		<view class="list">
			<view class="listX" v-for="(v, k) in listData" :key="k" @tap="courseDetails(v.id)">
				<view class="listX_left">
					<u-lazy-load class="lazy_load" :image="v.image + '-84_84'" :loading-img="loadingImg"></u-lazy-load>
					<view class="combination" v-if="v.course_type == 2">组合套餐</view>
				</view>
				<view class="listX_right">
					<view class="title row2">{{v.title}}</view>
					<view class="money">
						<text>￥{{v.price}}</text>
						<text class="originalPrice">￥{{v.original_price}}</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <view v-if="listData.length == 0" style="padding: 20rpx 0;">
			<u-empty  text="没有更多课程了" mode="list"></u-empty>
		</view> -->
		<noData text="暂时没有数据" v-if="listData.length == 0"></noData>
		<view style="padding: 14rpx 0;">
			<u-loadmore v-if="last_page > 1" :status="status" :icon-type="iconType" :load-text="loadText" />
		</view>
	</view>
</template>

<script>
	import noData from '@/components/xs-components/noData.vue';
	export default {
		data() {
			return {
				token: '',
				list: [{
					name: '题库'
				}, {
					name: '资料'
				}, {
					name: '听力',
				}, {
					name: '真题',
				}],
				isStudy: 2,
				nameIndex: 0,
				list2: [],
				current: 0,
				loadingImg: '',
				image: '',
				typeId: 1,
				cate_id: '',
				listData: [],
				refresh: true,
				page: 1,
				last_page: 1,
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				}
			}
		},
		components: {
			noData
		},
		onLoad() {
			uni.showLoading({
				title: '加载中'
			})
			this.classificationInfo()
			this.isOpen()
		},
		onShow() {
			this.token = uni.getStorageSync('USER_TOKEN');
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.page = 1
			this.refresh = true
			this.studyListInfo()
		},
		// 上拉加载
		onReachBottom() {
			if(this.page >= this.last_page) return ;
			this.status = 'loading';
			this.page ++;
			this.refresh = false
			setTimeout(() => {
				
				if(this.page >= this.last_page) this.status = 'nomore';
				else this.status = 'loading';
				this.studyListInfo()
			},500)
		},
		methods: {
			isOpen() {
				this.$api.post(global.apiUrls.getStudyOpen, {
					
				}).then(res => {
					if (res.data.code == 1) {
						this.isStudy = res.data.data.open
					}
				})
			},
			changeTitle(k) {
				uni.showLoading({
					title: '加载中'
				})
				this.nameIndex = k
				this.typeId = k +1
				this.page = 1
				this.refresh = true
				this.studyListInfo()
			},
			change(index) {
				uni.showLoading({
					title: '加载中'
				})
				this.current = index;
				this.cate_id = this.list2[index].id
				this.page = 1
				this.refresh = true
				this.studyListInfo()
			},
			// 分类数据
			classificationInfo() {
				this.$api.post(global.apiUrls.getClassification, {
					
				}).then(res => {
					uni.hideLoading()
					// console.log(res)
					if (res.data.code == 1) {
						this.list2 = res.data.data
						this.cate_id = this.list2[0].id
						this.studyListInfo()
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			// 列表数据
			studyListInfo() {
				if (!this.cate_id) return
				this.$api.post(global.apiUrls.getStudyList, {
					cate_id: this.cate_id,
					type: this.typeId,
					page: this.page
				}).then(res => {
					// console.log(res)
					uni.hideLoading()
					uni.stopPullDownRefresh()
					if (res.data.code == 1) {
						this.last_page = res.data.data.last_page
						if (this.refresh) {
							this.listData = res.data.data.data
						} else {
							this.listData = this.listData.concat(res.data.data.data)
						}
						
					} else {
						this.$message.info(res.data.msg)
					}
				})
			},
			// 课程详情
			courseDetails(id) {
				if (!this.token) {
					uni.redirectTo({
						url: '/pages/login/login/index'
					});
				} else {
					uni.navigateTo({
						url: '/pages/study/details?id=' + id
					})	
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.study {
		.navbar {
			.slot-wrap {
				width: 100%;
				text-align: center;

				text {
					margin: 0 28rpx;
				}

				.nameColor {
					color: #267DFF;
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.tabs {
			height: 110rpx;
			padding: 28rpx 0;
			border-bottom: 1rpx solid #EEEEEE;
			/deep/.u-tab-bar {
				background: #267DFF !important;
				// margin-top: 15rpx !important;
				position: absolute;
				bottom: -6rpx;
			}
		}
		.list {
			padding: 0 32rpx;
			.listX {
				padding:  32rpx 0;
				display: flex;
				border-bottom: 1rpx solid #EEEEEE;
				.listX_left {
					position: relative;
					width: 168rpx;
					height: 168rpx;
					border-radius: 16rpx;
					// background: skyblue;
					margin-right: 24rpx;
					// /deep/.u-lazy-item {
					// 	width: 100%;
					// 	height: 100% !important;
					// }
					.lazy_load {
						height: 168rpx;
						width: 168rpx;
						border-radius: 8upx !important;
					}
					image {
						width: 100%;
						height: 100%;
						border-radius: 16rpx;
					}
					.combination {
						position: absolute;
						top: 0;
						right: 0;
						width: 92rpx;
						height: 32rpx;
						background: #267DFF;
						opacity: 1;
						border-radius: 0rpx 16rpx 0rpx 16rpx;
						line-height: 32rpx;
						text-align: center;
						font-size: 20rpx;
						color: #FFFFFF;
					}
				}
				.listX_right {
					width: calc(100% - 192rpx);
					.title {
						height: 90rpx;
						font-weight: bold;
						margin-bottom: 33rpx;
					}
					.money {
						color: #FF3A3A;
						font-weight: bold;
						.originalPrice {
							font-size: 28rpx;
							color: #bfbfbf;
							margin-left: 24rpx;
							text-decoration: line-through;
						}
					}
				}
			}
		}
	}
</style>
